<template>
  <div>
    <Form :model="userSearch" :label-width="70">
      <Row :gutter="16">
        <i-col span="6">
          <FormItem label="用户姓名" prop="realName">
            <Input v-model="userSearch.realName" placeholder="根据用户姓名检索" @on-enter="toSearch"/>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="联系方式" prop="phone">
            <Input v-model="userSearch.phone" placeholder="根据用户联系方式检索" @on-enter="toSearch"/>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="微信昵称" prop="nickname">
            <Input v-model="userSearch.nickname" placeholder="根据微信昵称检索" @on-enter="toSearch"/>
          </FormItem>
        </i-col>
        <i-col span="6">
          <Button @click="toSearch" type="primary">检索</Button>
        </i-col>
      </Row>
      <Row :gutter="16">
        <i-col span="6">
          <FormItem label="用户类型" prop="type">
            <Select v-model="userSearch.type" @on-change="toSearch" clearable>
              <Option value="2">分销商客户</Option>
              <Option value="1">普通用户</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="用户等级" prop="customerId">
            <Select v-model="userSearch.customerId" @on-change="toSearch" clearable>
              <Option v-for="(setup, index) in setups" :key="index" :value="setup.id">{{ setup.name }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="加入时间" prop="time">
            <DatePicker @on-change="dateChange" type="daterange" :options="dateOptions" placement="bottom-start" placeholder="根据日期查询"/>
          </FormItem>
        </i-col>
      </Row>
    </Form>
    <div>
      <span>当前检索条件：</span>
      <Tag closable color="blue" v-for="(tag, index) in nowSearch" :key="index" @on-close="closeTag(tag)">{{ tags[tag] }}</Tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'user-search',
  data () {
    return {
      url: {
        setups: '/discount/setup/manage/select/all/branch/customer'
      },
      /*
      * "customerId": 0,
        "joinBeginTime": 0,
        "joinEndTime": 0,
        "nickname": "string",
        "phone": "string",
        "realName": "string",
        "type": 0
      * */
      userSearch: {
        realName: '',
        nickname: '',
        phone: '',
        type: null,
        customerId: null,
        joinBeginTime: 0,
        joinEndTime: 0
      },
      dateOptions: {
        shortcuts: [
          {
            text: '两天内',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
              return [start, end]
            }
          },
          {
            text: '一周内',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            }
          },
          {
            text: '一个月内',
            value () {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            }
          }
        ]
      },
      setups: [],
      tags: ['用户姓名', '微信昵称', '联系方式', '用户类型', '用户等级', '加入时间'],
      nowSearch: []
    }
  },
  methods: {
    dateChange (date) {
      this.userSearch.joinBeginTime = new Date(date[0]).valueOf()
      this.userSearch.joinEndTime = new Date(date[1]).valueOf() + 24 * 3600 * 1000 - 1
      this.toSearch()
    },
    getNotNull () {
      let count = 0
      let result = {}
      this.nowSearch = []
      for (let i in this.userSearch) {
        if (this.userSearch[i]) {
          result[i] = this.userSearch[i]
          this.nowSearch.push(count)
        }
        count++
      }
      if (this.nowSearch.indexOf(6) !== -1) {
        this.nowSearch.splice(this.nowSearch.indexOf(6), 1)
      }
      return result
    },
    clearData (index) {
      let count = 0
      for (let i in this.userSearch) {
        if (index === count) {
          this.userSearch[i] = null
        }
        count++
      }
    },
    closeTag (tag) {
      this.nowSearch.splice(this.nowSearch.indexOf(tag), 1)
      this.clearData(tag)
      if (this.nowSearch[0] !== undefined) {
        this.toSearch()
      } else {
        this.$emit('getAll')
      }
    },
    toSearch () {
      let params = this.getNotNull()
      if (this.nowSearch[0] !== undefined) {
        this.$emit('toSearch', params)
      }
    },
    getSetups () {
      this.$ajax.get(this.url.setups)
        .then(res => {
          if (res.data.success) {
            this.setups = res.data.data
          }
        })
    }
  },
  created () {
    this.getSetups()
  }
}
</script>

<style scoped>

</style>
